<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link th:href="@{static/semantic/semantic.min.css}" rel="stylesheet"/>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
    <div style="padding: 50px">
        <!--用户姓名-->
        <input type="hidden" name="userName" data-th-attr="value=${user.userName}" id="userName" />
        <input type="hidden" name="userName" data-th-attr="value=${user.userAccount}" id="userAccount" />

        <!-- 顶部导航栏 -->
        <div class="ui attached stackable menu">
            <div class="ui container">
                <a class="item" style="height:50px">
                    <img class="ui medium rounded mini image" src="/static/semantic/themes/default/assets/images/matthew.png" style="width: 35px;height: 35px;display:inline">
                    <span data-th-text="${user.userName}" style="margin-left: 10px;font-weight: bold"></span>
                </a>
                <a class="item">
                    <i class="grid layout icon"></i> Browse
                </a>
                <div class="ui simple dropdown item">
                    More
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item"><i class="edit icon"></i> Edit Profile</a>
                        <a class="item"><i class="settings icon"></i> Account Settings</a>
                    </div>
                </div>
                <div class="right item">
                    <div class="ui action left icon input">
                        <input type="text" placeholder="Search...">
                        <i class="users icon"></i>
                        <select class="ui compact selection dropdown">
                            <option value="user">用户</option>
                            <option value="group">群组</option>
                        </select>
                        <div class="ui button">Search</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面布局 -->
        <div class="ui horizontal segment" style="margin-left: 300px;margin-right: 350px">
            <!-- 左边部分 -->
            <div class="ui left very close rail" style="width: 300px">
                <div class="ui pointing menu">
                    <a class="item active" data-tab="one">我的好友 </a>
                    <a class="item" data-tab="two">我的群组 </a>
                    <a class="item" data-tab="three">黑名单 </a>
                </div>
                <idv id="friendList">
                    <div class="ui active tab segment" data-tab="one" style="height: 630px;overflow-y:auto;">
                        <div class="ui vertical menu" style="width: 100%">
                            <div  data-th-each="friend : ${friendList}" data-th-attr="id=${friend.friendAccount}">
                                <input class="friendAccount" data-th-attr="value=${friend.friendAccount}" type="hidden"/>
                                <input class="friendName" data-th-attr="value=${friend.friendName}" type="hidden"/>
                                <a class="item"  id="item-" data-th-attrappend="id=${friend.friendAccount}" style="height: 52px;padding-top: 9px">
                                    <img class="ui medium rounded mini image" src="/static/semantic/themes/default/assets/images/elyse.png" style="width: 35px;height: 35px;display:inline">
                                    <span data-th-text="${friend.friendName}" style="margin-left: 10px;font-weight: bold"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="ui tab segment" data-tab="two" style="height: 642px;overflow-y:auto;">
                        5
                    </div>
                    <div class="ui tab segment" data-tab="three" style="height: 642px;overflow-y:auto;">
                        6
                    </div>
                </idv>
            </div>
            <!-- 右边部分 -->
            <!-- 视频聊天框 -->
            <div class="ui right very close rail" style="width: 345px">
                <div class="ui segment">
                    <div class="ui card" style="width:100%">
                        <div class="image">
                            <!--<img src="/static/semantic/themes/default/assets/images/watchmen-horizontal.jpg">-->
                            <video id="localVideo" style="width:300px;height:250px;margin:5px" autoplay></video>
                        </div>
                        <div class="content">
                            <div class="header">视频聊天框</div>
                        </div>
                        <!--<div class="ui two bottom attached buttons">
                            <div class="ui inverted grey button" id="reject">
                                <i class="add icon"></i>
                                拒绝
                            </div>
                            <div class="ui inverted green button" id="accept">
                                <i class="play icon"></i>
                                接受
                            </div>
                        </div>-->
                        <div class="ui two bottom attached buttons">
                            <div class="ui teal button" id="cancel">
                                <i class="add icon"></i>
                                取消
                            </div>
                            <div class="ui orange button" id="hangup">
                                <i class="play icon"></i>
                                挂断
                            </div>
                        </div>
                        <div class="content" style="height:40px">
                            <div class="header">正在等待对方同意...</div>
                        </div>
                        <div class="image">
                            <video id="remoteVideo" style="width:300px;height:250px;margin:5px" autoplay></video>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间聊天框 -->
            <div>
                <div class="ui comments"  style="display: inline">
                    <h3 class="ui dividing header" id="chatWith">Comments</h3>
                    <!--保存接收者的账号和姓名，表示正在和谁聊天-->
                    <input type="hidden" name="receiverAccount" value="" id="receiverAccount" />
                    <input type="hidden" name="receiverName" value="" id="receiverName" />
                    <!--聊天内容框 每个comment就是一条消息-->
                    <div class="ui segment">
                        <div id="chatContent" class="chat content"  style="overflow-y:auto; height:300px; padding: 20px"></div>

                        <div class="ui menu">
                            <a class="item"><i class="image icon"></i> 图片 </a>
                            <a class="item">
                                <input id="file" type="file" style="position: absolute;right:0;top:0;opacity:0;left:0;width:100%;height:100%" multiple />
                                <i class="folder open icon"></i>文件 </a>
                            <a class="item" id="test"><i class="unmute icon"></i> 语音 </a>
                            <a class="item" id="video"><i class="video camera icon"></i> 视频 </a>
                            <div class="ui simple dropdown item">
                                More
                                <i class="dropdown icon"></i>
                                <div class="menu">
                                    <a class="item"><i class="calendar icon"></i> 聊天记录 </a>
                                    <a class="item"><i class="user icon"></i> 好友详情 </a>
                                </div>
                            </div>
                           <!-- <a class="item"><i class="calendar icon"></i> 聊天记录 </a>
                            <a class="item"><i class="user icon"></i> 好友详情 </a>-->
                        </div>
                        <form class="ui reply form">
                            <div class="field">
                                <textarea id="messageArea"></textarea>
                            </div>
                            <div class="ui blue labeled submit icon button" id="sendMessageButton"><i class="icon edit"></i> 发送消息</div>
                            <div class="ui red message" id="messageNotice" style="width: 300px;height: 38px;float: right;margin-top: 0px;padding-top: 0px;display:none">
                                <i class="close icon"></i>
                                <p>不允许发送空消息</p>
                            </div>
                        </form>
                         <!--遮罩层-->
                         <div class="ui inverted active dimmer" id="dimmer">
                             <div class="ui icon message">
                                 <i class="comments icon"></i>
                                 <div class="content">
                                     <p>选择好友开始聊天吧</p>
                                 </div>
                             </div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 文件样式 -->
        <!--<div class="comment">
            <a class="avatar"><img src="/static/semantic/themes/default/assets/images/matt.jpg"></a>
            <div class="content"><a class="author">我 </a><div class="metadata"><span class="date">时间</span></div>
                <div class="text">
                    <div class="ui segment" style="width:270px;height:80px;cursor:pointer" onclick="downLoadFile('path')">
                        <a class="ui orange right ribbon label"><i class="block layout icon"></i></a>
                        <div class="ui form" style="margin-top: -25px">
                            <div class="inline field" style="margin-bottom: 5px">
                                <label>文件名称:</label>
                                <label>测试</label>
                            </div>
                            <div class="inline field">
                                <label>文件大小:</label>
                                <label>23M</label>
                                <label>已发送：</label>
                            </div>
                        </div>
                        <div class="ui bottom attached progress" id="test">
                            <div class="bar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
    <!-- 用户下线提示框 -->
    <div class="ui small modal" id="userOffline">
        <div class="header">下线通知</div>
        <div class="content">
            <p>您的账号在另一地点登录，您被迫下线！</p>
        </div>
        <div class="actions">
            <div class="ui positive right labeled icon button" onclick="forceOffline()">确定 <i class="checkmark icon"></i> </div>
        </div>
    </div>
    <!-- 视频聊天请求框 -->
    <div class="ui small modal" id="videoRequest">
        <div class="header">视频请求</div>
        <div class="content">
            <p>您的好友，<span id="videoFriendName"></span>请求与您视频通话</p>
        </div>
        <div class="actions">
            <div class="ui right labeled buttons">
                <button class="ui button" id="reject">拒绝</button>
                <div class="or"></div>
                <button class="ui positive button" id="accept">接受</button>
            </div>
        </div>
    </div>
</body>
<script th:src="@{static/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{static/jquery.cookie.js}" type="text/javascript"></script>
<script th:src="@{static/semantic/semantic.min.js}" type="text/javascript"></script>
<!-- 简单对webSocket封装了一下 -->
<script th:src="@{static/util/my.websocket.js}" type="text/javascript"></script>
<!-- md5 -->
<script th:src="@{static/util/md5.js}" type="text/javascript"></script>
<!-- 业务js -->
<script th:src="@{static/chat/index.js}" type="text/javascript"></script>
</html>